{% extends "base.jinja" %}
{% block content %}
  <div class="container">
  <div class="box">
    <div class="block">
      <p class="title is-4">Table of all entries</p>
      <p class="subtitle is-6">Games, engines, tools sortable and searchable (filter by any combination of words).</p>
    </div>
  </div>
  <div class="box">
    <details open>
      <summary>Table description</summary>
      <ul>
        <li><span class="has-text-weight-bold">Title:</span> name with link to OSGL entry (external link to game website)</li>
        <li><span class="has-text-weight-bold">State:</span> mature or beta, if inactive then "inactive since year"</li>
        <li><span class="has-text-weight-bold">Tags:</span> {{ macros.render_element(index['tags']) }}</li>
        <li><span class="has-text-weight-bold">Platform:</span> {{ macros.render_element(index['platforms']) }}</li>
        <li><span class="has-text-weight-bold">Language:</span> C, C++, Java, Python, JavaScript, ..</li>
        <li><span class="has-text-weight-bold">License:</span> MIT, GPL, BSD, ..</li>
      </ul>
    </details>
    <table class="table is-narrow is-hoverable"></table>
  </div>
  </div>
  <script>
    fetch("data/entries.json").then(response => response.json()).then(data => {
      let table = new simpleDatatables.DataTable(".table", {
        perPage: 20,
        perPageSelect: [10, 20, 40],
        footer: true,
        data: {
          headings: data["headings"],
          data: data["data"]
        },
      });

      table.on('datatable.init', function(args) {
        // sort by first column
        table.columns().sort(0);
        // use the urls search part for the search input field of the table
        if (window.location.search) {
          document.getElementsByClassName("dataTable-input").item(0).value = window.location.search.substring(1).replace("+", " ");
        }
      });
    })
  </script>
{% endblock %}